import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import LoginLanguageSelector from './LoginLanguageSelector';

const LoginFixTest = () => {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  // 模拟第三方登录函数（修复后的版本）
  const handleThirdPartyLogin = async (platform) => {
    try {
      setLoading(true);
      setError('');
      
      console.log(`使用${platform}登录`);
      
      // 转换平台名称为API参数
      const typeMap = {
        '微信': 'wechat',
        'QQ': 'qq',
        'wechat': 'wechat',
        'qq': 'qq'
      };
      const type = typeMap[platform] || platform.toLowerCase();
      
      // 模拟API调用（不会真正调用后端）
      console.log(`准备调用API: /lxt/shuidi-login?type=${type}`);
      
      // 模拟成功响应
      setTimeout(() => {
        setError(`✅ ${platform}登录测试完成 - 没有错误！`);
        setLoading(false);
      }, 1500);
      
    } catch (err) {
      console.error(`${platform}登录出错:`, err);
      setError(`${platform}登录失败，请稍后再试`);
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      backgroundImage: 'url("https://img.freepik.com/free-photo/workspace-workplace-office-table_144627-40148.jpg")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      padding: '20px',
      position: 'relative'
    }}>
      
      {/* 固定定位的语言选择器 */}
      <LoginLanguageSelector />

      {/* 测试表单 */}
      <div style={{
        width: '100%',
        maxWidth: '450px',
        background: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '12px',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
        overflow: 'hidden',
        backdropFilter: 'blur(10px)'
      }}>
        <div style={{ padding: '32px' }}>
          <div style={{ 
            textAlign: 'center',
            marginBottom: '32px' 
          }}>
            <h2 style={{ 
              fontSize: '28px', 
              fontWeight: '600', 
              color: '#333', 
              margin: '0 0 8px 0' 
            }}>
              🔧 第三方登录修复测试
            </h2>
            <p style={{
              color: '#666',
              fontSize: '14px',
              margin: 0
            }}>
              测试修复后的QQ/微信登录功能
            </p>
          </div>

          {/* 错误/状态显示 */}
          {error && (
            <div style={{
              background: error.includes('✅') ? '#f6ffed' : '#fff2f0',
              border: `1px solid ${error.includes('✅') ? '#b7eb8f' : '#ffccc7'}`,
              color: error.includes('✅') ? '#52c41a' : '#ff4d4f',
              padding: '12px 16px',
              borderRadius: '6px',
              marginBottom: '20px',
              fontSize: '14px',
              fontWeight: '500'
            }}>
              {error}
            </div>
          )}

          {/* 第三方登录按钮 */}
          <div style={{ marginBottom: '24px' }}>
            <p style={{ 
              textAlign: 'center', 
              color: '#666', 
              marginBottom: '16px',
              fontSize: '14px'
            }}>
              点击按钮测试修复效果
            </p>
            
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center', 
              gap: '20px' 
            }}>
              <button
                onClick={() => handleThirdPartyLogin('微信')}
                disabled={loading}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '120px',
                  height: '50px',
                  backgroundColor: loading ? '#ccc' : '#07C160',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  fontSize: '16px',
                  fontWeight: '500',
                  cursor: loading ? 'not-allowed' : 'pointer',
                  transition: 'all 0.3s ease',
                  boxShadow: '0 4px 12px rgba(7, 193, 96, 0.3)'
                }}
                onMouseEnter={(e) => {
                  if (!loading) {
                    e.target.style.backgroundColor = '#06AD56';
                    e.target.style.transform = 'translateY(-2px)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (!loading) {
                    e.target.style.backgroundColor = '#07C160';
                    e.target.style.transform = 'translateY(0)';
                  }
                }}
              >
                {loading ? '⏳' : '🐲'} 微信登录
              </button>

              <button
                onClick={() => handleThirdPartyLogin('QQ')}
                disabled={loading}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '120px',
                  height: '50px',
                  backgroundColor: loading ? '#ccc' : '#12B7F5',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  fontSize: '16px',
                  fontWeight: '500',
                  cursor: loading ? 'not-allowed' : 'pointer',
                  transition: 'all 0.3s ease',
                  boxShadow: '0 4px 12px rgba(18, 183, 245, 0.3)'
                }}
                onMouseEnter={(e) => {
                  if (!loading) {
                    e.target.style.backgroundColor = '#0EA5E9';
                    e.target.style.transform = 'translateY(-2px)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (!loading) {
                    e.target.style.backgroundColor = '#12B7F5';
                    e.target.style.transform = 'translateY(0)';
                  }
                }}
              >
                {loading ? '⏳' : '🐧'} QQ登录
              </button>
            </div>
          </div>

          {/* 修复说明 */}
          <div style={{
            background: '#f0f9ff',
            border: '1px solid #bae6fd',
            borderRadius: '8px',
            padding: '16px',
            marginTop: '20px'
          }}>
            <h4 style={{ 
              color: '#0369a1', 
              margin: '0 0 8px 0',
              fontSize: '14px',
              fontWeight: '600'
            }}>
              🔧 修复内容
            </h4>
            <ul style={{ 
              margin: 0, 
              paddingLeft: '16px',
              color: '#0c4a6e',
              fontSize: '13px',
              lineHeight: '1.5'
            }}>
              <li>移除了未初始化的 <code>response</code> 变量引用</li>
              <li>添加了缺失的 <code>typeMap</code> 对象定义</li>
              <li>修正了变量作用域和初始化顺序</li>
              <li>确保错误处理逻辑正确执行</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginFixTest; 